<!--
 * @Author: Rain
 * @Date: 2021-11-25 16:22:20
 * @LastEditTime: 2024/01/15 17:24:54
 * @Description: Do Something
-->
<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div
        class="flex items-center flex-end search"
        style="padding-bottom: 10px"
      >
        <!-- 搜索 -->
        <el-input
          v-model="query.nickname"
          clearable
          placeholder="微信昵称"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation :crud="crud" />
        <el-col :span="1.5">
          <el-button
            class="filter-item"
            type="primary"
            size="mini"
            plain
            icon="el-icon-download"
            @click="handleExport"
          >导出EXCEL</el-button>
        </el-col>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="80px"
        >
          <el-form-item label="status">
            <el-input v-model="form.status" style="width: 370px" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.mobile" style="width: 370px" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >确认</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column prop="realName" label="姓名" />
        <el-table-column prop="nickname" label="微信昵称" />
        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="headimgurl" label="头像">
          <template slot-scope="{ row }">
            <img
              :src="row.headimgurl"
              alt=""
              style="width: 60px; height: 60px"
            >
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="{ row }">
            {{ row.sex == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column prop="subscribeTime" label="关注时间" />
        <el-table-column prop="remark" label="描述" />
        <el-table-column
          v-if="checkPer(['admin', 'wxUser:edit', 'wxUser:del'])"
          label="操作"
          width="150px"
          align="center"
        >
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-user-solid"
              @click="viewUser(row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
    </div>
    <el-dialog title="分享用户" :visible.sync="dialogVisible" width="70%">
      <el-table :data="recommandList" size="small" style="width: 100%">
        <el-table-column align="center" label="#" type="index" />
        <el-table-column prop="openId" label="openId" align="center" />
        <el-table-column prop="nickName" label="微信昵称" align="center" />
        <el-table-column prop="mobile" label="手机号" align="center" />
        <el-table-column prop="headPic" label="头像" align="center">
          <template slot-scope="{ row }">
            <img :src="row.headPic" alt="" style="width: 60px; height: 60px">
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="关注时间" align="center" />
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="dialogVisible = false"
          >确 定</el-button>
        </div>
      </el-table>
      <el-pagination
        class="flex flex-end"
        :page-size.sync="pages.size"
        :total="pages.total"
        :current-page.sync="pages.page"
        style="margin-top: 8px"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChangeHandler"
        @current-change="pageChangeHandler"
      />
    </el-dialog>
  </div>
</template>

<script>
import crudWxUser, { exportWxUserInfo, saveExcelFiles } from '@/api/wxUser'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
const defaultForm = {
  openid: null,
  id: null,
  nickname: null,
  sex: null,
  language: null,
  city: null,
  province: null,
  country: null,
  headimgurl: null,
  subscribe: null,
  subscribeTime: null,
  unionid: null,
  remark: null,
  groupid: null,
  tagidList: null,
  status: null,
  mobile: null
}
export default {
  name: 'WxUser',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '微信用户',
      url: 'api/wxUser',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudWxUser }
    })
  },
  data() {
    return {
      permission: {},
      rules: {},
      queryTypeOptions: [{ key: 'nickname', display_name: '微信昵称' }],
      dialogVisible: false,
      list: [],
      recommandList: [],
      pages: {
        openId: '',
        page: 0,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    viewUser(row) {
      if (row) {
        const { openId } = row
        this.pages.openId = openId
        this.pages.page = 0
      }
      this.$http
        .get('/api/wxUserRecommand', { params: this.pages })
        .then((_) => {
          const { content, totalElements } = _
          this.recommandList = content
          this.pages.total = totalElements
        })
      this.dialogVisible = true
    },
    pageChangeHandler(e) {
      this.pages.page = e
      this.viewUser()
    },
    sizeChangeHandler(e) {
      this.pages.size = e
      this.viewUser()
    },
    // 导出
    handleExport() {
      this.$confirm('确认导出微信用户信息？', {
        confirmButtonText: '导出',
        cancelButtonText: '取消',
        type: 'question'
      }).then(() => {
        try {
          var data = this.queryParams
          exportWxUserInfo(data)
            .then((res) => {
              saveExcelFiles(res, '微信用户信息.xls') // 从后端请求的数据处理导出Excel文件
            })
            .catch((err) => {
              console.log(err)
            })
        } catch (e) {
          return false
        }
      })
    }
  }
}
</script>

<style scoped></style>
